<template>
  <view>
    <t-cell
      v-if="showCell"
      :title="title"
      arrow
      :note="`${startModel} - ${endModel}`"
      @click="show"
    />

    <t-calendar
      v-model:visible="visibleModel"
      v-model:value="dateRange"
      type="range"
      :minDate="minDate"
      :maxDate="maxDate"
      @confirm="handleConfirm"
    />
    <!-- @select="handleSelect" -->
    <!-- @close="onClose" -->
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from "vue";
import { useVModel } from "@vueuse/core";
import { isBoolean } from "lodash-es";
import dayjs from "dayjs";

const props = defineProps({
  showCell: {
    type: Boolean,
    default: true,
  },
  visible: {
    type: [String, Boolean],
    default: "",
  },
  start: {
    type: String,
    default: "",
  },
  end: {
    type: String,
    default: "",
  },

  disabled: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "区间选择日期",
  },
});
const emits = defineEmits([
  "update:visible",
  "update:start",
  "update:end",
  "change",
]);

const startModel = useVModel(props, "start", emits);
const endModel = useVModel(props, "end", emits);
const dateRange = computed(() => [
  startModel.value || dayjs(),
  endModel.value || dayjs().add(1, "day"),
]);

const visibleModel = isBoolean(props.visible)
  ? useVModel(props, "visible", emits)
  : ref(false);
// 向前三年
const minDate = dayjs().subtract(3, "year").toDate();
// 向后三年
const maxDate = dayjs().add(3, "year").toDate();

const handleConfirm = (val) => {
  // console.log("范围选择", val);
  startModel.value = dayjs(val[0]).format("YYYY-MM-DD");
  endModel.value = dayjs(val[1]).format("YYYY-MM-DD");
  emits("change", val);
};

const show = () => {
  if (props.disabled) return;

  visibleModel.value = true;
};

// const handleSelect = (val) => {
//   console.log(val);
// };
// const onClose = (trigger) => {
//   console.log("closed by", trigger);
// };
</script>

<style lang="less" scoped></style>
